<template>
  <div class="complaint-form">
    <el-card>
      <h2 style="text-align: center; margin-bottom: 20px;">投诉表</h2>
      <el-form
          ref="form"
          :model="complaint"
          label-width="80px"
          class="complaint-form"
          @submit.prevent="handleSubmit"
      >
        <!-- 姓名 -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="complaint.name" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <!-- 联系电话 -->
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="complaint.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>

        <!-- 投诉内容 -->
        <el-form-item label="投诉内容" prop="content">
          <el-input v-model="complaint.content" type="textarea" placeholder="请输入投诉内容"></el-input>
        </el-form-item>

        <!-- 上传图片 -->
        <el-form-item label="上传图片" class="upload-item">
          <el-upload
              class="upload-demo"
              action="//jsonplaceholder.typicode.com/posts/"
              :file-list="imageList"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleImageSuccess"
              :before-upload="beforeImageUpload"
              multiple
              :limit="3"
              accept="image/png,image/jpeg"
              list-type="picture-card">
            <i class="el-icon-plus"></i>
            <div style="margin-top: 10px;">点击上传图片</div>
          </el-upload>
        </el-form-item>

        <!-- 上传视频 -->
        <el-form-item label="上传视频" class="upload-item">
          <el-upload
              class="upload-demo video-upload"
              action="//jsonplaceholder.typicode.com/posts/"
              :file-list="videoList"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleVideoSuccess"
              :before-upload="beforeVideoUpload"
              :limit="1"
              accept="video/mp4"
              list-type="text">
            <template #default>
              <div class="upload-content">
                <i class="el-icon-video-camera"></i>
                <div class="upload-text">点击上传视频</div>
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <!-- 提交和重置按钮 -->
      <div class="button-group">
        <el-button type="primary" native-type="submit" size="large" @click="handleSubmit">提交</el-button>
        <el-button @click="resetForm" size="large">重置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import service from "@/util/request";
import {ElMessage} from "element-plus";
import Router from "@/router";


const complaint = ref({
  name: '',

  content: ''
});

const imageList = ref([]);
const videoList = ref([]);

function handleSubmit() {
  // 构造表单数据
  const formData = new FormData();
  formData.append('userId', complaint.value.name);
  formData.append('content', complaint.value.content);

  // 发送 POST 请求到后端接口
  service.post('/submit_complaint', formData)
      .then(res => {

        // 处理成功的逻辑，例如显示成功消息等
        // 注意，如果后端返回空内容，确保前端可以正确处理
        if (res.status == 200) {
          ElMessage.success("提交成功");
          Router.push("/announcement");
          resetForm();
        } else {
          console.error('请求失败，状态码:', res.status);
          ElMessage.error("提交失败：" + res.status);
        }
      })
      // .catch(error => {
      //   console.error('请求失败:', error);
      //   ElMessage.error("提交失败：" + error.message);
      // });
}
function resetForm() {
  // 重置表单数据
  complaint.value = {
    name: '',
    content: ''
  };
  // 不清空已上传的图片和视频列表
}

function handlePreview(file) {
  console.log('预览文件:', file);
}

function handleRemove(file, fileList) {
  console.log('移除文件:', file, '当前文件列表:', fileList);
}

function handleImageSuccess(response, file, fileList) {
  console.log('图片上传成功:', response, '文件:', file, '当前文件列表:', fileList);
  imageList.value = fileList;
}

function handleVideoSuccess(response, file, fileList) {
  console.log('视频上传成功:', response, '文件:', file, '当前文件列表:', fileList);
  videoList.value = fileList;
}

function beforeImageUpload(file) {
  // 图片上传前的验证逻辑，比如文件类型、大小等
  console.log('图片上传前验证:', file);
  return true; // 返回 true 表示验证通过，允许上传
}

function beforeVideoUpload(file) {
  // 视频上传前的验证逻辑，比如文件类型、大小等
  console.log('视频上传前验证:', file);
  return true; // 返回 true 表示验证通过，允许上传
}
</script>

<style scoped>
.complaint-form {
  width: 800px; /* 增加表单宽度 */
  margin: 0 auto;
  padding: 20px;
}

.upload-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.video-upload {
  width: 100%; /* 宽度占满父容器 */
  text-align: center; /* 文本居中 */
}

.upload-demo {
  border: 1px dashed #d9d9d9;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color .2s ease-in-out;
  width: 128px;
  height: 128px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.upload-demo i {
  color: #8c939d;
  font-size: 32px;
  line-height: 128px;
  text-align: center;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.upload-content i {
  font-size: 48px;
  color: #409eff;
}

.upload-text {
  margin-top: 10px;
}

.button-group {
  text-align: center;
  margin-top: 40px; /* 按钮组距离表单底部的距离 */
  display: flex;
  justify-content: space-around;
}

.button-group .el-button {
  width: 150px; /* 按钮宽度 */
  height: 50px; /* 按钮高度 */
  font-size: 16px; /* 字体大小 */
}
</style>
